<template>
	<view>
		<view class="title">
			彩生活
		</view>
		<view class="hj">
			<img src="./生活图片/cxy_1.png">
		</view>
		<view class="hj-p">
			<view class="hj-p-left">
				佳选法国红酒
			</view>
			<view class="hj-p-right">
				<p>11:00开抢</p>
				<img src="./生活图片/cxy_3.png">
			</view>
		</view>
		<view class="mf-con">
			<view class="mf">
				<img src="./生活图片/cxy_2.png">
			</view>
			<view class="mf-p">
				<view class="mf-p-left">
					佳选法国红酒
					<view class="mf-left-img">
						<img src="./生活图片/cxy_4.png">
					</view>
				</view>
				<view class="mf-p-right">
					<p>16:00开抢</p>
					<img src="./生活图片/cxy_3.png">

				</view>
			</view>
		</view>
		<view class="sc">
			<view class="sc-left">
				<view class="sc-left-p">
					张妈妈私厨

				</view>
				<view class="sc-left-y">
					女

				</view>
				<view class="sc-xin">

				</view>
			</view>

			<view class="sc-right">
				<view class="sc-right-y">
					男

				</view>
				<view class="sc-right-p">
					张妈妈私厨

				</view>
			</view>
		</view>
		<view class="sc-img">
			<view class="sc-one">
				<img src="./生活图片/cxy_6.png">
			</view>
			<view class="sc-two">
				<img src="./生活图片/cxy_7.png">
			</view>
		</view>
		<view class="gp-title">
			<p>果盘</p>
		</view>
		<view class="gp-img">
			<img src="./生活图片/cxy_8.png">
		</view>
		<view class="gp-title">
			<p>玫瑰饼</p>
		</view>
		<view class="gp-img" @click="mgb">
			<img src="./生活图片/cxy_9.png">
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}

		},

		methods: {
			// 跳玫瑰饼
			mgb() {
				uni.navigateTo({
					url: '/pages/Home/cxydetails'
				})
			},

		},
	}
</script>

<style lang="scss">
	* {
		margin: 0;
		padding: 0;
	}

	.title {
		text-align: center;
		font-size: 40upx;
		margin-top: 20upx;

	}

	.hj {
		width: 100%;
		height: 328upx;
		background-color: aqua;
		margin-top: 20upx;

	}

	.hj img {
		width: 100%;
		height: 100%;
	}

	.hj-p {
		width: 100%;
		height: 66upx;
		// background-color: blanchedalmond;
		display: flex;
	}

	.hj-p-left {
		width: 50%;
		height: 100%;
		// background-color: aquamarine;
		display: flex;
		line-height: 56upx;
		font-size: 32upx;
	}

	.hj-p-right {
		width: 50%;
		height: 100%;
		// background-color: red;

	}

	.hj-p-right img {
		width: 40upx;
		height: 40upx;
		margin-top: 12upx;
		margin-left: 20upx;
		float: right;
	}

	.hj-p-right p {
		margin-top: 10upx;
		margin-left: 20upx;
		font-size: 32upx;
		float: right;
	}

	.mf-con {
		width: 100%;
		height: 351upx;
		background-color: #f2f2f2;
		border-top: 1px solid #f2f2f2;
	}

	.mf {
		width: 100%;
		height: 328upx;
		background-color: aqua;
		margin-top: 16upx;

	}

	.mf img {
		width: 100%;
		height: 100%;
	}

	.mf-p {
		width: 100%;
		height: 66upx;
		// background-color: blanchedalmond;
		display: flex;
	}

	.mf-p-left {
		width: 50%;
		height: 100%;
		// background-color: aquamarine;
		display: flex;
		line-height: 56upx;
		font-size: 32upx;
		// position: absolute;
	}

	.mf-left-img {

		// background-color: red;
		border-radius: 50%;
		margin-top: 30upx;
		position: absolute;
		top: 57%;
		left: 28%;
	}

	.mf-left-img img {
		width: 184upx;
	}

	.mf-p-right {
		width: 50%;
		height: 100%;
	}

	.mf-p-right img {
		width: 40upx;
		height: 40upx;
		margin-top: 12upx;
		margin-left: 20upx;
		float: right;
	}

	.mf-p-right p {
		margin-top: 10upx;
		margin-left: 20upx;
		font-size: 32upx;
		float: right;
	}

	.sc {
		width: 100%;
		height: 88upx;
		// background-color: red;
		margin-top: 64upx;
		display: flex;
	}

	.sc-left {
		width: 50%;
		height: 100%;
		background-color: #fb9080;


	}

	.sc-right {
		width: 50%;
		height: 100%;
		background-color: #49bcfd;

	}

	.sc-left-y {
		width: 60upx;
		height: 60upx;
		// background-color: antiquewhite;
		border: 1px solid #fff;
		border-radius: 50%;
		text-align: center;
		margin-left: 20upx;
		float: left;
		margin-top: 10upx;
		line-height: 50upx;
		color: #fff;
		// background-image: url('../course/生活图片/cxy_16.png');
		// background-size: 110%;
		// background-position: center;
		// background-repeat: no-repeat;
	}

	.sc-left-p {
		margin: 0 auto;
		float: left;
		margin-left: 48upx;
		line-height: 78upx;
		font-size: 35upx;
		color: #fff;
	}

	.sc-right-y {
		width: 60upx;
		height: 60upx;
		color: #fff;
		// background-color: antiquewhite;
		border: 1px solid #fff;
		border-radius: 50%;
		text-align: center;
		margin-left: 74upx;
		float: left;
		margin-top: 10upx;
		line-height: 50upx;
	}

	.sc-right-p {
		margin: 0 auto;
		float: left;
		margin-left: 24upx;
		line-height: 78upx;
		font-size: 35upx;
		color: #fff;
	}

	.sc-xin {
		width: 86upx;
		height: 68upx;
		// background-color: saddlebrown;
		position: absolute;
		top: 72%;
		left: 44%;
		background-image: url('@/pages/Home/生活图片/cxy_5.png');
		background-size: 100%;
		background-repeat: no-repeat;
		background-position: center;
	}

	.sc-img {
		width: 100%;
		height: 260upx;
		background-color: sandybrown;
		display: flex;

	}

	.sc-one {
		// width: 50%;
		height: 100%;
		background-color: aquamarine;
	}

	.sc-one img {
		width: 100%;
		height: 100%;
	}

	.sc-two {
		// width: 50%;
		height: 100%;
		background-color: aquamarine;
	}

	.sc-two img {
		width: 100%;
		height: 100%;
	}

	.gp-title {
		width: 100%;
		height: 70upx;
		// background-color: #49bcfd;
		background-image: url("@/pages/Home/生活图片/cxy_17.png");
		background-size: 80%;
		background-repeat: no-repeat;
		background-position: center;
	}

	.gp-title p {
		text-align: center;
		line-height: 70upx;
		font-size: 42upx;
	}

	.gp-img {
		width: 100%;

		height: 328upx;
		background-color: #fb9080;
	}

	.gp-img img {
		width: 100%;
		height: 100%;
	}
</style>
